<template>
  <el-dialog title="权限变更" append-to-body :close-on-click-modal="false" v-dialogDrag :visible.sync="visible">
    <div>
      <div class="t_table">
        <div class="w_100 pb-25 flex border-b-1">
          <div class="w33  ">
            <div class="t_item ">
              <div class="t_lable fz_b fz_18">
                变更内容
              </div>
            </div>
          </div>
          <div class="w33 ">
            <div class="t_item">
              <div class="t_lable fz_b fz_18">
                变更前
              </div>
            </div>
          </div>
          <div class="w33  ">
            <div class="t_item">
              <div class="t_lable fz_b fz_18">
                变更后
              </div>
            </div>
          </div>
        </div>
        <div class="t_table_line">
          <div class="w33 flex_column_left  j_a">
            <div class="t_item">
              <div class="t_lable">{{ getDictValue(serviceChangeType,inputForm.changeType) }}</div>
            </div>
          </div>
          <div class="w33 flex_column_left  j_a">
            <div class="t_item">
              <div class="t_lable">{{ getDictValue(changeTypeStatus,inputForm.afterStatus) }}</div>
            </div>
          </div>
          <div class="w33 flex_column_left  j_a">
            <div class="t_item flex">
              <div class="min_red red_labels"></div>
              <div class="t_lable">状态:</div>
              <div class="t_input">
                <el-select v-model="inputForm.status" :disabled="type!='add'" placeholder="请选择 权限变更类型" size="small" >
                  <el-option v-for="item in changeTypeStatus" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey">
                    <span style="float: left">{{ item.dictValue }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.dictKey }}</span>
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="t_item flex">
              <div class="min_red red_labels"></div>
              <div class="t_lable">变更范围:</div>
              <div class="t_input">
                <el-select v-model="inputForm.rangesChange" :disabled="type!='add'" placeholder="请选择 权限变更类型" size="small" >
                  <el-option v-for="item in rangesChange" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey">
                    <span style="float: left">{{ item.dictValue }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.dictKey }}</span>
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="t_item flex">
              <div class=" red_labels"></div>
              <div class="t_lable">变更内容:</div>
              <div class="t_input">
                <el-input v-model="inputForm.message" :disabled="type!='add'" type="textarea" :rows="3" :maxlength="250" show-word-limit placeholder="请输入变更内容" size="small"></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div style="padding:10px 0" class=" border-t-1 "><span class="haruyuki-ml-6 pt-40 fz_b t_title">备注:</span>
        </div>
        <div>
          <el-input v-model="inputForm.remark" :disabled="type!='add'" type="textarea" :rows="3" :maxlength="250" show-word-limit>
          </el-input>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer" v-if="type=='add'">
      <span class="haruyuki-flex-x-end">
        <el-button size="small" v-preventClick @click="cancelClick">取消</el-button>
        <el-button size="small" type="primary" v-preventClick @click="handleSubmit" :disabled="disabledBtn">确认变更</el-button>
      </span>
    </span>
  </el-dialog>
</template>

<script>
import { getDictionary } from "@/api/system/dict";
import { updateStatus } from "@/api/rb-oem/serviceinfo/service_info_details";

// import serviceChangeType from "@/api/service/serviceChangeType";

export default {
  props: {
    qxType:{
      type: String
    }
  },
  data() {
    return {
      visible: false,
      inputForm: {
        serviceNo:'',
        changeType:'',//变更类型 1.登录权限 2.提现权限 3.开户权限
        afterStatus:'',
        status:'',//0.禁用 1.启用
        rangesChange:'',//变更范围 1.本级 2，体系
        message:"",//提示消息
        remark: ''
      },
      serviceChangeType:[],
      changeTypeStatus: [],
      rangesChange: [],
      type:'add',
      disabledBtn:false
    };
  },
  computed: {
    getDictValue() {
      return (arr,cty)=>{
        let it = arr.filter(item =>{
          return item.dictKey === cty;
        })
        return it.length ? it[0].dictValue : ''
      }
    }
  },
  created(){
    this.$nextTick(()=>{
      this.doGetDicts();
    })
  },
  methods: {
    /* 提交 */
    async handleSubmit() {
      this.disabledBtn = true;
      if(this.inputForm.status==''){
        this.disabledBtn = false;
        this.$message.error('状态 不能为空')
      }else if(this.inputForm.rangesChange==''){
        this.disabledBtn = false;
        this.$message.error('变更范围 不能为空')
      }else if(this.inputForm.message==''){
        this.disabledBtn = false;
        this.$message.error('变更内容 不能为空')
      }else{
        const { data } = await updateStatus({ ...this.inputForm });
        if (data.code != 200) {
          this.$message.error(data.msg);
          this.disabledBtn = false;
          return 
        }
        this.visible = false;
        this.disabledBtn = false;
        this.$emit("resetFun");
        this.$message.success(data.msg);
      }
    },
    cancelClick(){
      this.visible = false;
    },
    init(param) {
      this.visible = true;
      this.inputForm = {
        serviceNo:param.serviceNo,
        changeType:param.changeType+'',//变更类型 1.登录权限 2.提现权限 3.开户权限
        afterStatus:param.afterStatus+'',
        status:'',//0.禁用 1.启用
        rangesChange:'',//变更范围 1.本级 2，体系
        message:"",//提示消息
        remark: ''
      }
      this.type='add'
    },
    initView(param) {
      this.visible = true;
      this.inputForm = {
        serviceNo: param.serviceNo,
        changeType: param.changeType+'',//变更类型 1.登录权限 2.提现权限 3.开户权限
        afterStatus: param.status+'',
        status: param.afterStatus+'',//0.禁用 1.启用
        rangesChange: param.rangesChange+'',//变更范围 1.本级 2，体系
        message: param.message,//提示消息
        remark: param.remark
      }
      this.type='view'
    },
    /* 字典 */
    doGetDicts() {
      // 服务商权限变更类型
      getDictionary({ code: "service_qx_type" }).then((res) => {
        this.serviceChangeType = res.data.data;
      });

      // 权限状态
      getDictionary({ code: "change_type_status" }).then((res) => {
        this.changeTypeStatus = res.data.data;
      });
      // 变更范围
      getDictionary({ code: "ranges_change" }).then((res) => {
        this.rangesChange = res.data.data;
      });
    }
    
  }
};
</script>
<style lang="scss" scoped>
.w_100 {
  width: 100%;
}

.flex {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.fz_18 {
  font-size: 18px;
}

.flex_column_left {
  display: flex;
  flex-direction: column;
}

.j_a {
  justify-content: space-around !important;
}

.border-b-1 {
  border-bottom: solid 2px #f5f5f5 !important;
}
.pb-25 {
  padding-bottom: 25px;
}
.t_title {
  font-weight: 500;
  // font-size: 20px;
}

.w33 {
  width: 33%;
  // text-align: center;
}

.t_table {
  .t_table_line {
    display: flex;
    flex: 1;
    padding-bottom: 10px;
    padding-top: 10px;
  }

  .t_table_line:first-child {
    border-bottom: 1px solid #dcdfe6;
  }
}

.t_item {
  padding-top: 10px;
  // display: flex;
  // justify-content: center;
  // align-items: center;

  .t_lable {
    width: 100px;
    // text-align: center;
    color: #666;
  }
  .t_input{
    width: 100% !important;
  }
}
</style>